﻿/*********************************************
 * lib 
 *********************************************/
.txt
{
    font-family: Verdana;
    font-size: 0.9em;
}
.cbo
{
    font-family: Verdana;
    font-size: 0.9em;
}
.height-space 
{
	height: 50px;	
}
.form-error-group {
	border: 1px solid #f6c0cd;
	background-color: #fdf0f7;	
	display: none;
	width: 97%;
	margin: 10px auto;
}
.form-error-group .error-content {
	background: transparent url(../images/form/iconError.gif) no-repeat left top;
	margin: 10px;
	padding-left: 25px;
	color: #FF0000;	
}
.form-error-group li.lierrindent {
	margin-left: 15px;
	list-style: none;
	padding: 0;
}
.form-error-group span {
	color: #FF0000;
}
.radio {
	margin: 0;
	border: 0;
	height: auto;
	width: auto;
	vertical-align: middle;
}
.checkbox {
	margin: 0;
	border: 0;
	height: auto;
	width: auto;
}
/* field tip - error */
.fieldTips {
	border: 1px solid #fec400;
	background-color: #fbf8e9;
	display: none;
	margin-left: 35px;
	padding-left: 5px;
	padding-right: 5px;
	position: absolute;
	width: 250px;
}
.fieldTips .pointer {
	background: transparent url(../images/form/pointer.gif) no-repeat left top;
	height: 19px;
	left: -10px;
	position: absolute;
	top: 1px;
	width: 10px;
}
.fieldError {
	border: 1px solid #f6c0cd;
	background-color: #fdf0f7;
	display: none;
	margin-left: 40px;
	padding-left: 5px;
	position: absolute;
	width: 250px;
}
.fieldError .pointer-error {
	background: transparent url(../images/form/pointer-error.gif) no-repeat left top;
	height: 19px;
	left: -10px;
	position: absolute;
	top: 1px;
	width: 10px;
}
/*********************************************
 * form userRegister, userEitInfo 
 *********************************************/
#userRegister, 
#userEditInfo,
#userChangePassword,
#userLostPassword,
#userAddFriend,
#userUpdateBankInfo
{	
	width: 900px;
	margin: 10px auto;
}
.userRegister, 
.userEditInfo,
.userChangePassword, 
.userLostPassword,
.userAddFriend
{
	font-size: 0.9em;
	padding: 0 20px 20px 20px;	
}
.userRegister p.form-line,
.userEditInfo p.form-line,
.userChangePassword p.form-line,
.userLostPassword p.form-line,
.userLostPassword p.form-line,
.userAddFriend p.form-line
{
	border-bottom: 1px solid #D5D5D5; 
	margin: 10px 0 10px 0;
}
.userEditInfo .field2
{
	clear: both;
	display: block;
	padding: 5px 0pt;
}
.userEditInfo .field2 label
{
	display: block;
	float: left;
	padding-right: 10px;
	text-align: right;
	width: 180px;
}
.userRegister h3.form-header,
.userEditInfo h3.form-header,
.userChangePassword h3.form-header,
.userLostPassword h3.form-header,
.userAddFriend h3.form-header
{
	color: #DB5300;
	font-size: 18px;
	margin: 0 auto; 
	padding-top: 10px;
}
.userRegister h2.form-group-title
{
	color: #777777;
	font-size: 16px;
	font-weight: bold;	
	margin: 0 auto;
	padding: 10px 0 0 0;
}
.userRegister .form-remark
{
	color: #888888;
	font-family: verdana;
	padding-bottom: 4px;
}
.userRegister .field,
.userEditInfo .field,
.userChangePassword .field,
.userLostPassword .field,
.userAddFriend .field {
	clear: both;
	display: block;
	padding: 5px 0pt;
	line-height: 22px;
}
.userRegister .field input,
.userEditInfo .field input,
.userChangePassword .field input,
.userLostPassword .field input
 {
	background: #fff;
	border: 1px solid #C0C0C0;
	height: 18px;
	padding-top: 1px;
	padding-left: 2px;
}
.userRegister .field label,
.userEditInfo .field label,
.userChangePassword .field label,
.userLostPassword .field label,
.userAddFriend .field label 
{
	display: block;
	float: left;
	padding-right: 10px;
	text-align: right;
	width: 180px;
}
.userRegister .field label.labelLine,
.userEditInfo .field label.labelLine,
.userAddFriend .field label.labelLine 
{
	float: left;
	padding-right: 15px;
	text-align: right;
	width: 40px;
}
.userRegister .field select,
.userEditInfo .field select {
	float: left;
	border: 1px solid #C0C0C0;
	height: 20px;
	margin-right: 10px;
}
.userRegister .field .img,
.userEditInfo .field .img,
.userChangePassword .field .img,
.userLostPassword .field .img,
.userLogin .field .img {
	border: 0;
	padding: 0;
	vertical-align: middle;
}
.userRegister .field textarea {
	background: #fff;
	border: 1px solid #C0C0C0;
	height: 100px;
	padding-left: 2px;
	font-size: 0.9em;
	font-family: Verdana;
}
/* xét độ dài cho thẻ input, dropdownbox */
.userRegister .field #txtFullName,
.userRegister .field #txtAddress,
.userRegister .field #txtUsername,
.userRegister .field #txtPassword,
.userRegister .field #txtPasswordConfirm,
.userRegister .field #txtEmail,
.userRegister .field #txtPhoneNumber,
.userRegister .field #txtEmailConfirm,
.userRegister .field #txtSignature, 
.userRegister .field #txtHobby
{
	width: 320px;
}
.userRegister .field #txtIDNumber 
{
	width: 142px;
}
.userRegister .field #ddlDOBDay,
.userRegister .field #ddlDOBMonth,
.userRegister .field #ddlDOBYear
{
	width: 70px;
}
.userRegister .field #ddlCountry,
.userRegister .field #ddlCity
{
	width: 130px;
}
.userRegister .field #txtConfirmCode
{
	width: 205px;
}
.userRegister .field #ddlIDType 
{
	width: 168px;
}
.userRegister .field #accept {
	height: auto;
	width: auto;
}
/*********************************************
 * form userEditInfo - thong_tin_ca_nhan
 *********************************************/
#userEditInfo
{
	position: relative;	
}

/* xét độ dài cho thẻ input, dropdownbox */
.userEditInfo .field #txtFullName,
.userEditInfo .field #txtAddress,
.userEditInfo .field #txtEmail,
.userEditInfo .field #txtSignature,
.userEditInfo .field #txtHobby 
{
	width: 320px;
}
.userEditInfo .field #txtIDNumber 
{
	width: 155px;
}
.userEditInfo .field #slComment, 
.userEditInfo .field #slShoutBox 
{
	width: 200px;
}
.userEditInfo .field #ddlDOBDay,
.userEditInfo .field #ddlDOBMonth,
.userEditInfo .field #ddlDOBYear
{
	width: 70px;
}
.userEditInfo .field #ddlCountry,
.userEditInfo .field #ddlCity
{
	width: 130px;
}
.userEditInfo .field #ddlIDType 
{
	width: 155px;
}
.userEditInfo .field #accept {
	height: auto;
	width: auto;
}
.userEditInfo .field textarea {
	background: #fff;
	border: 1px solid #C0C0C0;
	height: 100px;
	padding-left: 2px;
	font-size: 0.9em;
	font-family: Verdana;
}
.userEditInfo .field .current-balance
{
	color: Red;
	font-weight: bold;
}
.userEditInfo #avatar
{
	width: 160px;
	height: 160px;
	position: absolute;	
	top: 150px;
	right: 20px;
}

/*********************************************
 * IM - PhoneNumber 
 ********************************************/
.im, .phoneNumber
{
	float: left;
}
.im ul.key,
.phoneNumber ul.key
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline;	
}
.im ul.key li,
.phoneNumber ul.key li
{
	display: inline;
	padding: 2px;
}
.im ul.key a,
.phoneNumber ul.key a 
{
	margin-right: 5px;
	margin-left: 20px;
	text-decoration: none;
}
.im ul.key .key-ym 
{
	background: transparent url(../images/form/im/icon_yahoo.gif) no-repeat left center;
	color:#FFFFFF;
}
.im ul.key .key-skype 
{
	background: transparent url(../images/form/im/icon_skype.gif) no-repeat left center;
	color:#FFFFFF;
}
.im ul.key .key-gtalk 
{
	background: transparent url(../images/form/im/icon_gtalk.gif) no-repeat left center;
	color:#FFFFFF;
}
.im ul.key .key-zing 
{
	background: transparent url(../images/form/im/icon_zing.gif) no-repeat left center;
	color:#FFFFFF;
}
.im ul.key .key-msn 
{
	background: transparent url(../images/form/im/icon_winlive.gif) no-repeat left center;
	color:#FFFFFF;
}
.im ul.key .key-aol 
{
	background: transparent url(../images/form/im/icon_aim.gif) no-repeat left center;
	color:#FFFFFF;
}
.im ul.im-input,
.phoneNumber ul.phoneNumber-input
{
	display: block;
	margin: 5px 0 0 0;
	padding: 0;
	font-size: 0.9em;
	list-style: none;
}
.im ul.im-input li,
.phoneNumber ul.phoneNumber-input li
{
	display: block;
	line-height: 18px;
	padding: 2px 0pt;
}
.im ul.im-input label,
.phoneNumber ul.phoneNumber-input label
{
	float: left;
	padding-right: 10px;
	text-align: left;
	width: 60px;
}
.im ul.im-input input,
.phoneNumber ul.phoneNumber-input input
{
	border: 1px solid #C0C0C0;
	padding-left: 2px;
	width: 250px;
}
.im ul.im-input img,
.phoneNumber ul.phoneNumber-input img
{
	border: 0;
	margin-left: 5px;
}
.phoneNumber ul.key .key-desk 
{
	background: transparent url(../images/form/phone/desk-phone.jpg) no-repeat left center;
	color:#FFFFFF;
}
.phoneNumber ul.key .key-mobi 
{
	background: transparent url(../images/form/phone/mobi-phone.jpg) no-repeat left center;
	color:#FFFFFF;
}
/*********************************************
 * form userChangePassword
 *********************************************/
.userChangePassword .field #txtOldPassword,
.userChangePassword .field #txtNewPassword,
.userChangePassword .field #txtNewPasswordConfirm
{
	width: 320px;
}
.userChangePassword .field #accept {
	height: auto;
	width: auto;
}
/*********************************************
 * form userLogin 
 *********************************************/
#userLogin 
{
	float: left;
	width: 980px;
	margin: 10px auto;
	border: 1px solid #d8dfea;
}
#userLogin .ads
{
	float: left;
	width: 490px;
	padding: 20px 5px 10px;
}
.userLogin 
{
	font-size:0.9em;
	padding: 22px 0px 10px 0px;	
	width: 350px;	
	float: right;
	border-right: 1px solid #d8dfea;
}
.userLogin p.form-header {
	font-size: 1.2em;
	color: #DB5201;
	font-weight: bold;
	margin: 0 0 4px 10px;
	vertical-align: middle;
}
.userLogin .field {
	display: block;
	padding: 8px 0pt;
	line-height: 22px;
}
.userLogin .field input {
	border: 1px solid #C0C0C0;
	height: 18px;	
	padding-left: 2px;
	padding-top: 1px;
	vertical-align: middle;
}
.userLogin .field label {
	display: block;
	float: left;
	padding-right: 10px;
	text-align: right;
	width: 110px;
}
.userLogin .field-content 
{
	margin-top: 25px;
}
.userLogin .field #txtUsername,
.userLogin .field #txtPassword 
{
	width: 200px;
}
.userLogin .field #accept
{
	margin-right: 10px;
	height: auto;
	width: auto;
}

.userLogin .field .error {
	border: 1px solid #f6c0cd;
}
.userLogin .fieldErrorGroup 
{
	clear: both;
	display: block;
}
.userLogin .fieldErrorGroup label {
	display: block;
	float: left;
	padding-right: 10px;
	text-align: right;
	width: 110px;
}
/*
.userLogin .fieldErrorGroup .errorGroup 
{
	background:#FEF0F0 url(../images/form/icon_err.gif) no-repeat 5px 6px;
	border: 1px solid #FAC5C7;
	margin: 2px 0pt;
	padding: 2px 4px 2px 20px;
	width: 178px;
	float: left;
	font-size: 0.9em;
}
*/
.userLogin .fieldErrorGroup .errorGroup 
{
	margin: 2px 0pt;
	padding: 2px 4px 2px 0px;
	width: 178px;
	float: left;
	font-size: 0.9em;
	color: #FF0000;
}
/******************/
.personalPage #edit-inline 
{
	margin: 0;
}

.personalPage #edit-box #edit-inline-submit,
.personalPage #edit-box #edit-inline-cancel  
{
	border: 1px solid #D3D6C1;
	margin: 3px;
}

/*********************************************
 * form userLostPassword 
 *********************************************/
.userLostPassword .field #txtUsername
{
	width: 320px;
}
.userLostPassword .field #accept {
	height: auto;
	width: auto;
}
.userLostPassword .field #txtConfirmCode
{
	width: 205px;
}
/*********************************************
 * profiles - upload avatar 
 *********************************************/
.changeImage 
{
	background: url(../images/form/browse-file.jpg) no-repeat;
	display: inline;
    overflow: hidden;
    width: 105px;
    height: 23px;
    float: left;
    margin-top: 10px;
    margin-left: 25px;
}
.changeImage-over 
{
	background: url(../images/form/browse-file-over.jpg) no-repeat;
}
/*********************************************
 * profiles - delete avatar 
 *********************************************/
.deleteImage 
{
	background: url(../images/form/delete-avatar-off.jpg) no-repeat;
	display: inline;
    overflow: hidden;
    width: 105px;
    height: 23px;
    float: left;
    margin-top: 10px;
    margin-left: 25px;
}
.deleteImage-over 
{
	background: url(../images/form/delete-avatar-over.jpg) no-repeat;
}
/*********************************************
 * userAddFriend 
 *********************************************/
.userAddFriend .field textarea
 {
	background: #fff;
	border: 1px solid #C0C0C0;
	height: 100px;
	width: 320px;
	padding-left: 2px;
	font-size: 0.9em;
	font-family: Verdana;
}
.quickUpdate 
{	
	display: block;
	font-size: 0.9em;
}
.quickUpdate label
{
	font-size: 0.9em;	
	margin-left: 10px;
}
.quickUpdate #find
{
	cursor: pointer;
	vertical-align: top;
}
.quickUpdate #txtQuickUpdateKeyword
{
	margin: 0px 0px 0px 10px;
	border: 1px solid #C0C0C0;
	width: 146px;
	background-color:#FFFDDD;
}

#product-quick-update #products-list .product-item-rows
{
	margin: 10px 0px;
}

#product-quick-update #products-list .product-item-col-picture div
{
	margin: 0px 5px 0 10px;
}

#product-quick-update #products-list .product-item-rows .product-item-col-name .paragraph
{
	margin: 5px;
}

.txt
{
	background: #fff;
	border: 1px solid #C0C0C0;
	height: 18px;
	padding-left: 2px;	
}

/* postback error group */
#postback .error {
	background-color: #FDF0F7;
	border: 1px solid #F6C0CD;
	display: block;
	margin: 10px;	
}
#postback .error .error-content {
	background: transparent url(../images/form/iconError.gif) no-repeat left top;
	color: #FF0000;
	margin: 10px;
	padding-left: 25px;
}
#postback .error .error-content li.lierrindent {
	list-style: none;
	margin-left: 15px;
	line-height: 22px;
	height: 22px;
	padding: 0;
}
#postback .error .error-content li.lierrindent span label {
	color: #FF0000;
}
/* success group */
#postback .success {
	background-color: #F7F7F7;
	border: 1px solid #DEDEDE;
	display: block;
	margin: 10px;
}
#postback .success .success-content {
	background: transparent url(../images/iconSuccess.html) no-repeat left top;
	margin: 10px;
	padding-left: 25px;
}